<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib  uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/resource/css/bootstrap.min.css" />
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
</head>
<body>
	<input type="button" value="增加" onclick="add()">
	<button type="button" class="btn btn-primary btn-sm" onclick="delBatch()">批量删除</button>
	<table class="table table-hover">
		<tr>
			<td>id <input type="checkbox" id="ids" onclick="selAll($(this))"> 
			<button onclick="selReverse()">反选</button> </td>
			<td>编号</td>
			<td>名称</td>
			<td>属性</td>
			<td>操作</td>
		</tr>
		<c:forEach items="${info.list}" var="s">
			<tr>
				<td>${spec.id} <input type="checkbox" value="${spec.id}" name="id"  onclick="selOne()"> </td>
				<td>${s.id}</td>
				<td>${s.specName}</td>
				<td>
					<c:forEach items="${s.options}" var="o" varStatus="i">
						<c:if test="${i.index!=0}">,</c:if>${o.optionName}
					</c:forEach>
				</td>
				<td>
			<button type="button" class="btn btn-primary btn-sm"  onclick="toUpdate(${s.id})">修改</button>
			<button type="button" class="btn btn-danger btn-sm"  onclick="del(${s.id})">删除</button>
		</td>
		</tr>
		</c:forEach>
		
		
	</table>
	<nav aria-label="Page navigation example">
		  <ul class="pagination">
		    <li class="page-item"><a class="page-link" href="#">首页</a></li>
		    
		    <c:forEach begin="1" end="${info.pages}" var="page">
		   	 	<c:if test="${page!=info.pageNum}">
		   	 	<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="query(${page})">${page}</a></li>
		   	 	</c:if>
		   	 	<c:if test="${page==info.pageNum}">
		   	 	<li class="page-item"><a class="page-link" href="javascript:void(0)" ><font color="red">${page}</font> </a></li>
		   	 	</c:if>
		    </c:forEach>
		    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
		  </ul>
		</nav>
</body>
<script type="text/javascript">
function query(page){
	var query=$("#queryForm").serialize();
	$("#workContent").load('./spec/select?pageNum='+page,query);
}
	function add(){
		$("#workContent").load('/spec/toAdd');
	}
function del(id){
		
		var re = confirm('您确认要删除该数据么？')
		if(!re){
			return;
		}
		var delIds=new Array();
		delIds.push(id)
		$.post('./spec/del',{ids:delIds},function(data){
			if(data=='ok'){
				alert('删除成功')
				$("#workContent").load('./spec/select');
			}else{
				alert('删除失败')
			}
		})
		
	}
	
	// 进入修改的页面
	function toUpdate(id){
		$("#workContent").load('./spec/toUpdate',{id:id});
	}
	
	
	// 全选  全不选
	function selAll(chkAll){
		var checked = chkAll.prop("checked");
		$("[name=id]").each(function(){
			$(this).prop('checked',checked)
		})
		
	}
	
	
	
	//反选
	function selReverse(){
		$("[name=id]").each(function(){
			$(this).prop('checked',!$(this).prop('checked') )
		})
	}
	
	// 点击列表中的一个复选框的时候的处理
	function selOne(){
		
		console.log(" 总长度 " + $("[name=id]").length)
		console.log(" xuanhong 长度 " +  $("[name=id]:checked").length )
		var checked=  $("[name=id]").length ==  $("[name=id]:checked").length ;
		
		$("#ids").prop("checked",checked)
		
	}
	
	function delBatch(){
		if($("[name=id]:checked").length<1){
			alert('请至少选中一条数据')
			return;
		}
		
		// 确认是否删除
		var cf=confirm("您确认要删除这些数据么？")
		if(!cf){
			return;
		}
		
		//被删除的数据的id 数组
		var delIds=new Array();
		$("[name=id]:checked").each(function(){
			delIds.push($(this).val());
		})
		
		console.log("将要删除的数据是 " + delIds)
		//return;
		$.post('./spec/del',{ids:delIds},function(data){
			if(data=='ok'){
				alert('删除成功')
				$("#workContent").load('./spec/list');
			}else{
				alert('删除失败')
			}
		})
		
	}
</script>
</html>